@charset "utf-8";

/*
 * 品类弹窗 样式
 */

@import "common/mixincommon";




.win-category{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $sf;
}



.category-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: $sf;
    padding: r(40px);
    box-shadow: 0px r(-5px) r(20px) 0px rgba(0, 0, 0, 0.1);
    z-index: 2;
    form{
        position: relative;
        width: 100%;
        height: r(80px);
        border-radius: r(10px);
        font-size: 0;
        overflow: hidden;
    }
    .header-keyword{
        width: calc(100% - 3rem);
        height: r(80px);
        color: $s3;
        font-size: r(28px);
        background-color: $se;
        padding: 0 r(20px);
        @include inputplace($sb);
        vertical-align: middle;
        transition: all .4s;
    }
    .searchbtn{
        width: r(120px);
        height: r(80px);
        line-height: r(80px);
        color: $sf;
        font-size: r(28px);
        background-color: $acolor;
        text-align: center;
        vertical-align: middle;
    }
    .closebtn{
        display: none;
        position: absolute;
        top: r(23px);
        right: r(140px);
        color: $sb;
        font-size: r(24px);
        padding: r(5px);
    }
    .backbtn{
        display: none;
        width: r(50px);
        height: 100%;
        background: url(../img/apply/icon-left.png) no-repeat left;
        background-size: 100%;
        margin-right: r(20px);
        vertical-align: middle;
    }
}


.category-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: $sf;
    padding: r(20px) r(40px);
    box-shadow: 0px r(-5px) r(20px) 0px rgba(0, 0, 0, 0.1);
    .btn{
        display: block;
        width: r(315px);
        height: r(80px);
        border-radius: r(40px);
        overflow: hidden;
        color: $s9;
        font-size: r(32px);
        text-align: center;
    }
    .canclebtn{
        float: left;
        line-height: r(72px);
        background-color: transparent;
        border: r(4px) solid $se;
    }
    .centbtn{
        float: right;
        color: $sf;
        line-height: r(80px);
        background-color: $acolor;
    }
    .centbtn.disabled{
        background-color: $sc;
    }
}




.category-list{
    width: 100%;
    height: 100%;
    background-color: $f2;
    padding-top: r(180px);
    padding-bottom: r(140px);
    overflow-y: auto;
    .list-item{
        width: 100%;
        background-color: $sf;
        padding: 0 r(40px);
    }
    .item-title{
        height: r(90px);
        line-height: r(90px);
        color: $s3;
        font-size: r(32px);
        margin-bottom: r(20px);
    }
    .check-list{
        font-size: 0;
        li{
            width: 50%;
            font-size: 0;
            margin-bottom: r(40px);
        }
        li:nth-of-type(2n+1){
            padding-right: r(15px);
        }
        li:nth-of-type(2n){
            padding-left: r(15px);
        }
    }
    .radio-wrapper{
        input:checked ~ label{
            color: $s6;
        }
    }
    .checkbox-wrapper{
        display: inline-block;
        .checkbox-check-text{
            max-width: r(266px);
            margin-left: r(12px);
            @include textoverflow;
        }
    }
    .item-li{
        li:last-of-type,li:nth-last-of-type(2){
            margin-bottom: r(20px);
        }
    }
    .item-li:last-of-type{
        li:last-of-type,li:nth-last-of-type(2){
            margin-bottom: r(40px);
        }
    }
}



.list-second{
    margin-top: r(20px);
    margin-bottom: r(20px);
}



.category-search{
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: $sf;
    padding-top: r(160px);
    overflow-y: auto;
    z-index: 1;
    .list-item{
        width: 100%;
        color: $s3;
        font-size: r(28px);
        background-color: $f2;
        padding: r(20px) r(40px);
    }
    .list-nodata{
        display: none;
        height: r(300px);
        line-height: r(300px);
        color: $s3;
        font-size: r(30px);
        text-align: center;
    }
}
